<template>
    <div>



      <div class="flex items-center justify-center  ">
        <div class="  relative w-full ">
          <div class="h-26  flex  w-full  justify-between   relative  w-full ">
            <div class="flex   items-center  w-full    space-x-2    ">
              <div><img    :src="user.avatar"  class="w-12 h-12 rounded-lg  "></div>
              <div >{{ user.username }}</div>
              <div  class="flex-grow">
                  <input placeholder="按回车搜索"  @keyup.13="search()" v-model="search_string"  class="  w-full   " />
              </div>
              <div class=" z-50  ">
                <button @click="isOpen = !isOpen" type="button" class="block   focus:outline-none">
                  <svg class="h-12 w-12 fill-current" viewBox="0 0 24 24">
                    <path v-if="isOpen" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>
                    <path v-if="!isOpen" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
                  </svg>
                </button>
              </div>
              <button v-if="isOpen" @click="isOpen = false" tabindex="-1" class="fixed inset-0 h-full w-full bg-black   z-30    opacity-50 text-white text-6xl  cursor-default"></button>
            </div>

<!--

-->

          </div>
          <!--    -->
          <transition
              enter-active-class="transition-all transition-fastest ease-out-quad"
              leave-active-class="transition-all transition-faster ease-in-quad"
              enter-class="opacity-0 scale-70"
              enter-to-class="opacity-100 scale-100"
              leave-class="opacity-100 scale-100"
              leave-to-class="opacity-0 scale-70"         >
            <div    v-if="isOpen"   class="px-2 pt-2 pb-4 bg-white  space-y-3  w-1/3  rounded-lg  z-50    absolute   right-0    ">
              <div  ><a class="block" href="/">主页</a></div>
              <div  ><a class="block" href="/add">发表博客</a></div>
              <div   v-show="!hasLogin"><a class="block"  href="/login">登录</a></div>
              <div   v-show="hasLogin"><a   class="block"   @click="logout">退出</a></div>
            </div>
          </transition>


        </div>
      </div>



        <div class="flex  justify-between  p-3   ">
        </div>

      <div class="bg-gray-100  relative  p-3 "  v-show="search_result_show">
        <p class="h-8"></p>
        <div class=" absolute  right-2 top-2  "  @click="search_result_show =  !search_result_show ">
          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="text-gray-400  cursor-pointer  "    viewBox="0 0 16 16">
            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
          </svg>
        </div>
        <div v-for="item in mydata">
          <p   class="text-2xl  font-bold  hover:text-green-500 underline ">
            <router-link target="_blank"  :to="{name: 'BlogDetail', params: {blogId: item.id}}"  v-html="item.title"  ></router-link>
          </p>
          <p v-html="item.description"></p>
          <p v-show="false">{{item.id}}</p>
          <p class="border-b-2 m-2  "></p>
        </div>
      </div>





    </div>
</template>


<script>
  import axios from "axios";

  export default {
    name: "Header",
    data() {
      return {
        isOpen:false,
        search_string:'一家六口',
        user: {
          username: '请登陆',
          avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        },
        hasLogin: false,
        search_result_show: false,
        mydata:[]
      }
    },
    methods: {
      logout() {
          this.$store.commit("REMOVE_INFO")
          this.$router.push("/login")
      },
      search(){
        console.log(this.search_string)
        this.mydata = []
        let _this = this
        axios.get('/search/'+this.search_string).then(function (resp){
          console.log(resp)
          _this.search_result_show = true
          _this.mydata = resp.data.data
        })
      }
    },
    created() {
      if(this.$store.getters.getUser.username) {
        this.user.username = this.$store.getters.getUser.username
        this.user.avatar = this.$store.getters.getUser.avatar
        this.hasLogin = true
      }
    }
  }
</script>

<style scoped>
</style>
